<template>
  <div>
    <el-card class="header-card">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-input placeholder="请输入关键字查询" suffix-icon="el-icon-search" v-model="searchFormData.KeyName"
                        style="width: 70%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="开单时间:">
              <el-date-picker
                v-model="dateTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="operator-button">
            <el-form-item>
              <el-button type="primary" @click="getData" icon="el-icon-search">查询</el-button>
              <ExportFileButton :column-des-objs="columnDesObjs" @export="exportData">
                <el-button type="success" icon="el-icon-download">导出</el-button>
              </ExportFileButton>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="data-table">
      <AzureDynamicTable :column-des-objs="columnDesObjs" :data="tableData" :show-seq="true">
      </AzureDynamicTable>
    </el-card>

    <el-card class="pagination-footer">
      <Pagination :total="total" :page.sync="PageIndex" :limit.sync="PageSize" @pagination="getData"
                  :page-sizes="PageSizes" v-show="total>0" class="pagination"></Pagination>
    </el-card>
  </div>
</template>

<script>
  import moment from 'moment'
  import { ERR_OK } from '@/utils/commons'
  import { GetFactoryProduct } from '@/api/productionStat'
  import Pagination from '@/components/ATheFridayClub/Pagination'
  import ExportFileButton from '@/components/ATheFridayClub/export/ExportFileButton.vue'
  import ASelect from '@/components/ATheFridayClub/ASelect'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'

  export default {
    name: 'workShopState',
    components: { ASelect, ExportFileButton, AzureDynamicTable, Pagination },
    data() {
      return {
        tableData: [],
        columnDesObjs: [
          { label: '产品输出类型', key: 'ProductPrintTypeName' },
          { label: '产品名', key: 'ProductName' },
          { label: '产品规格', key: 'ProductSize' },
          { label: '产品面积', key: 'ProductArea' },
          { label: '照片数', key: 'photoNum' },
          { label: '产品数', key: 'ProductNum' }
        ],
        PageIndex: 1,
        PageSize: 10,
        PageSizes: [10, 50, 100, 200],
        total: '',
        searchFormData: {
          KeyName: '',
          StOrderTime: '',
          EndOrderTime: '',
          ShopName: '',
          ProductPrintTypeId: ''
        },
        dateTime: [moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 3)).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    async mounted() {
      await this.getData()
    },
    methods: {
      async getData({ PageIndex = this.PageIndex, PageSize = this.PageSize, isExport = false } = {}) {
        try {
          this.searchFormData.StOrderTime = this.dateTime[0]
          this.searchFormData.EndOrderTime = this.dateTime[1]
          const { Code, Result } = await GetFactoryProduct({ PageIndex, PageSize, ...this.searchFormData })
          if (Code === ERR_OK) {
            const { Items, TotalNum, CurrentPage } = Result
            if (isExport) {
              return Items
            }
            this.tableData = Items
            console.log(this.tableData, 153)
            this.PageIndex = CurrentPage
            this.total = TotalNum
          }
        } catch (e) {
          console.error(e)
          throw e
        }
      },
      async exportData({ resolve, reject }) {
        try {
          resolve(await this.getData({ PageIndex: 1, PageSize: 10000000, isExport: true }))
        } catch (e) {
          reject(e)
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .header-card {
    margin: 12px 12px 12px 12px;
  }

  .data-table {
    margin: 12px 12px 12px 12px;
  }

  .pagination-footer {
    margin: 12px 12px 12px 12px;

    .pagination {
      padding-top: 0;
    }
  }
</style>
